<template>
  <div
    class="w-full min-h-screen relative flex items-center justify-center"
  >
    <!-- 背景装饰 -->
    <div class="absolute top-0 left-0 w-full h-full">
      <div
        class="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"
      ></div>
      <div
        class="absolute top-40 right-20 w-72 h-72 bg-blue-500/90 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"
      ></div>
      <div
        class="absolute -bottom-8 left-40 w-72 h-72 bg-bsr/80 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"
      ></div>
    </div>
    <!-- 音乐播放器 -->
    <div
      class="relative backdrop-blur-lg bg-white/10 rounded-2xl p-8 mx-10 w-96 shadow-2xl border border-white/20"
    >
      <div
        class="absolute inset-0 bg-gradient-to-r from-white/10 to-transparent opacity-50 rounded-2xl"
      ></div>

      <div class="relative">
        <h2 class="text-3xl font-bold text-white mb-8 text-center">
          音乐播放器
        </h2>

        <div class="space-y-6">
          <div class="flex items-center justify-between">
            <button
              class="w-12 h-12 p-3 bg-white/20 hover:bg-white/30 text-white rounded-full transition-all duration-300 transform hover:scale-110"
              @click="playPrevious"
            >
              <div>
                <img
                  class="w-30 text-white"
                  src="./assets/images/preSong.svg"
                />
              </div>
            </button>
            <button
              class="w-16 h-16 p-4 bg-white/20 hover:bg-white/30 text-white rounded-full transition-all duration-300 transform hover:scale-110 relative"
              @click="togglePlay"
            >
              <!-- 播放/暂停图标 -->
              <div v-show="!isPlaying">
                <img
                  class="w-30 text-white"
                  src="./assets/images/startSong.svg"
                />
              </div>
              <div v-show="isPlaying">
                <img
                  class="w-30 text-white"
                  src="./assets/images/stopSong.svg"
                />
              </div>
            </button>
            <button
              class="w-12 h-12 p-3 bg-white/20 hover:bg-white/30 text-white rounded-full transition-all duration-300 transform hover:scale-110"
              @click="playNext"
            >
              <div>
                <img
                  class="w-30 text-white"
                  src="./assets/images/nextSong.svg"
                />
              </div>
            </button>
          </div>
          <div class="space-y-2">
            <div class="w-full h-1 bg-white/20 rounded-full">
              <div
                class="h-1 bg-white rounded-full"
                :style="{ width: progressPercentage + '%' }"
              ></div>
            </div>
            <div
              class="flex justify-between text-sm text-white/70"
              v-if="isClient"
            >
              <span>{{ formatTime(currentTime) }}</span>
              <span>{{ formatTime(duration) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
// import nextSong from "./assets/images/nextSong.svg";
// import preSon from "./assets/images/preSon.svg";
// import startSong from "./assets/images/startSong.svg";
// import stopSong from "./assets/images/stopSong.svg";
import { useAudioPlayerStore } from "~/stores/audioPlayer";
const audioStore = useAudioPlayerStore();
// 从 store 获取状态 (使用 computed 包裹以保持响应性)
const isPlaying = computed(() => audioStore.isPlaying);
const currentTime = computed(() => audioStore.currentTime);
const duration = computed(() => audioStore.duration);
const progressPercentage = computed(() => audioStore.progressPercentage);

const formatTime = audioStore.formatTime;
// const isMobile = ref(false);
const isClient = ref(false);
const dialog = ref(null);
onMounted(() => {
  isClient.value = true;
});
function togglePlay() {
  audioStore.togglePlay();
}
function playNext() {
  audioStore.playNext();
}
function playPrevious() {
  audioStore.playPrevious();
}
</script>

<style scoped>
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}
</style>
